<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习2</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h3>你最喜欢哪部小说？</h3>
        <input type="checkbox" v-model="all" @change="fullCheck()">全选<br>
        <span v-for="(item,index) in books">
            <input type="checkbox" v-model="item.check" @change="clickChange">{{item.name}}
        </span>
        <br>
        新增其他：<input type="text" v-model="newName">
        <br>
        <input type="file" @change="load($event)"><button @click="add()">上传</button>
        <br>
        <button @click="selectAll">全选</button>
        <button @click="selectNone">全不选</button>
        <button @click="reverseSelect">反选</button>
        <br>
        <span v-for="item in books" >
            <img :src="item.src" style="width: 200px;height: 300px;" v-show="item.check">
        </span>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                all: false,
                newName:'',
                fileSrc:'',
                books:[{name:'三国演义',check:false,src:'./三国演义.webp'},{name:'西游记',check:false,src:'./西游记.webp'},{name:'红楼梦',check:false,src:'./红楼梦.webp'},{name:'水浒传',check:false,src:'./水浒传.webp'}],
            }
        },
        methods: {
            fullCheck(){
                if(this.all){
                    this.books.map(vv=>{
                        vv.check=true
                    })
                }
                else{
                    this.books.map(vv=>{
                        vv.check=false
                    })
                }
            },
            clickChange(){
                let flag = this.books.length
                this.books.map(v=>{
                    if(!v.check) flag--
                })
                if(flag<this.books.length)
                    this.all = false
                else
                    this.all = true
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc = target.result
                }
            },
            add(){
                this.books.push({name:this.newName,check:false,src:this.fileSrc})
            },
            selectAll() {
                this.books.forEach((book) => {
                    book.check = true;
                });
                this.all = true;
            },
            selectNone() {
                this.books.forEach((book) => {
                    book.check = false;
                });
                this.all = false;
            },
            reverseSelect() {
                this.books.forEach((book) => {
                    book.check =!book.check;
                });
            }
        },
    }).mount("#app")
</script>